<template>
  <div class="wrap">
    <div class="item">
      <div class="desc">环境质量</div>
      <el-progress
        class="circle"
        type="circle"
        :width="93"
        :stroke-width="5"
        :percentage="hjInfo.percentage"
        :color="hjInfo.color"
        :format="
          () => {
            return wcData.kqScore;
          }
        "
      ></el-progress>
    </div>
    <div class="item">
      <div class="desc">硬件管理</div>
      <el-progress
        class="circle"
        type="circle"
        :width="93"
        :stroke-width="5"
        :percentage="sbInfo.percentage"
        :color="sbInfo.color"
        :format="
          () => {
            return wcData.glScore;
          }
        "
      ></el-progress>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    wcData: {
      type: Object,
      require: true,
      default: () => {},
    },
  },
  data() {
    return {
      defaultData: {
        color: "#31EF81",
        percentage: 0,
      },
      dataMap: {
        优: {
          color: "#FF9B2F",
          percentage: 100,
        },
        良: {
          color: "#31EF81",
          percentage: 70,
        },
        轻度污染: {
          color: "#31EF81",
          percentage: 60,
        },
        中度污染: {
          color: "#31EF81",
          percentage: 50,
        },
        重度污染: {
          color: "#31EF81",
          percentage: 40,
        },
        严重污染: {
          color: "#31EF81",
          percentage: 30,
        },
        严重污染: {
          color: "#31EF81",
          percentage: 10,
        },
      },
      sbDataMap: {
        优: {
          color: "#FF9B2F",
          percentage: 100,
        },
        良: {
          color: "#31EF81",
          percentage: 70,
        },
        差: {
          color: "#31EF81",
          percentage: 40,
        },
      },
    };
  },
  computed: {
    hjInfo() {
      const { wcData, dataMap, defaultData } = this;
      if (wcData.kqScore != undefined) {
        return dataMap[wcData.kqScore] ? dataMap[wcData.kqScore] : defaultData;
      }
      return defaultData;
    },
    sbInfo() {
      const { wcData, sbDataMap, defaultData } = this;
      if (wcData.glScore != undefined) {
        return sbDataMap[wcData.glScore]
          ? sbDataMap[wcData.glScore]
          : defaultData;
      }
      return defaultData;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 250px;
  box-sizing: border-box;
  padding: 80px 120px 0px 95px;
  background: url("../../assets/img/home-05.png") no-repeat center center;
  background-size: contain;
  display: flex;
  justify-content: space-between;
  .desc {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 10px;
  }
  .circle {
    // box-shadow: 0 0 35px rgba(0, 34, 125, 1);
    box-shadow: 0 0 25px rgba(63, 98, 190, 1);
    border-radius: 44px;
    position: relative;
    &::before {
      content: " ";
      position: absolute;
      top: 10px;
      left: 10px;
      width: 71px;
      height: 71px;
      border: 1px solid rgba(63, 98, 190, 1);
      border-radius: 50%;
    }
    ::v-deep path:first-child {
      stroke: rgb(0, 34, 125);
    }

    ::v-deep .el-progress__text {
      font-size: 26px !important;
      color: #ffffff;
    }
  }
}
</style>